<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px;">
      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie style="height: 300px;" :value="pieData" text="博客发布分类"></chart-pie>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-bar style="height: 300px;" :value="barData" text="每周用户活跃量"/>
        </Card>
      </i-col>
    </Row>
    <Row>
      <Card shadow>
        <example style="height: 310px;"/>
      </Card>
    </Row>
  </div>
</template>

<script>
  import InforCard from '@/views/info-card/infor-card'
  import CountTo from '@/views/count-to/count-to'
  import { ChartPie, ChartBar } from '@/views/charts'
  import Example from './example.vue';
  import {blogSortPie} from '@/api/blogApi';
  import {infoCardData,weekActive} from '@/api/adminApi';
  export default {
    name: 'home',
    components: {
      InforCard,
      CountTo,
      ChartPie,
      ChartBar,
      Example
    },
    data () {
      return {
        inforCardData: [],
        pieData: [],  //饼图
        barData: {
          Mon: 0,
          Tue: 0,
          Wed: 0,
          Thu: 0,
          Fri: 0,
          Sat: 0,
          Sun: 0
        }
      }
    },
    mounted () {
      //博客发布饼图
      this.blogSortPie();
      this.infoData();
      //本周发布活跃人数
      this.weekActive();
    },
    created(){
      let obj = this.$store.state.menuItems;
    },
    methods: {
      blogSortPie() {
        //博客发布分类饼图
        blogSortPie().then(res => {
          if (res.data.code == 200) {
            //数据转换
            res.data.data.forEach(item => {
              let obj = {name: '', value: ''};
              obj.value = item.blogCount;
              obj.name = item.sortName;
              this.pieData.push(obj);
            });
          }
        })
      },
      weekActive() {
        weekActive().then(res => {
          if(res.data.code == 200){
            //填充数据
              let obj = res.data.data;
              this.barData.Mon = obj.monBlogCount ? obj.monBlogCount : 0;
              this.barData.Tue = obj.tueBlogCount ? obj.tueBlogCount : 0;
              this.barData.Wed = obj.wedBlogCount ? obj.wedBlogCount : 0;
              this.barData.Thu = obj.thuBlogCount ? obj.thuBlogCount : 0;
              this.barData.Fri = obj.friBlogCount ? obj.friBlogCount : 0;
              this.barData.Sat = obj.satBlogCount ? obj.satBlogCount : 0;
              this.barData.Sun = obj.sunBlogCount ? obj.sunBlogCount : 0;
          }
        })
      },
      infoData(){
        //首页数据
        infoCardData().then(res => {
          if(res.data.code == 200){
            this.inforCardData = res.data.data;
          }
        })
      }
    }
  }
</script>

<style lang="less">
  .count-style{
    font-size: 50px;
  }
</style>
